import React, { useState, useTransition } from "react";


export const TabContainer: React.FC = () => {
    const [activeTab, setActiveTab] = useState('home')

    const [isPending, startTransition] = useTransition()

    const onBtnClick = (name: string) => {
        // 把某次更新，标记为低优先级的
        startTransition(() => {
            setActiveTab(name)
        })
    }

    const Tab = () => {
        if (isPending) {
            return <h3>loading...</h3>
        }
        switch (activeTab) {
            case 'home':
                return <HomeTab />
            case 'movie':
                return <MovieTab />
            case 'about':
                return <AboutTab />
        }
    }

    return (
        <div style={{ height: '500px' }}>
            <TabButton isActive={activeTab === 'home'} onClick={() => { onBtnClick('home') }}>Home</TabButton>
            <TabButton isActive={activeTab === 'movie'} onClick={() => { onBtnClick('movie') }}>Movie</TabButton>
            <TabButton isActive={activeTab === 'about'} onClick={() => { onBtnClick('about') }}>About</TabButton>
            <hr />
            {Tab()}
        </div>
    )
}


const TabButton: React.FC<React.PropsWithChildren & { onClick: () => void; isActive: boolean }> = (props) => {
    return (
        <>
            <button className={['btn', props.isActive ? 'active' : ''].join(" ")} onClick={props.onClick}>{props.children}</button>
        </>
    )
}


const HomeTab: React.FC = () => {
    return (
        <>
            HomeTab
        </>
    )
}

const MovieTab: React.FC = () => {
    const items = Array(10000).fill("MovieTab").map((item, index) => {
        return <p key={index}>{item}</p>
    })
    return items
}

const AboutTab: React.FC = () => {
    return (
        <>
            AboutTab
        </>
    )
}